<template>
	<view>
		<!-- 轮播图信息 -->
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image class="image" :src="item.url" mode="aspectFill" :draggable="false"/>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<!-- 宫格信息 -->
		<uni-section title="连锁店功能" type="line" class="uni-group">
			<uni-grid :column="2" :showBorder="false" :square="false" @change="change" style="padding-top: 1%;">
				<uni-grid-item :index="1" class="uni-group-item">
					<view>
						<uni-icons type="shop-filled" size="45" class="uni-icon"></uni-icons>
						<text class="text" >单店销售报表</text>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="5" class="uni-group-item">
					<view>
						<uni-icons type="shop-filled" size="45" class="uni-icon"></uni-icons>
						<text class="text-two">单店月销售</text>
					</view>
				</uni-grid-item> 


			</uni-grid>
		<uni-grid :column="2" :showBorder="false" :square="false" @change="change" style="padding-top: 15%;">
							
					<uni-grid-item :index="2" class="uni-group-item">
								<view>
									<uni-icons type="shop-filled" size="45" class="uni-icon" ></uni-icons>
									<text class="text">销售统计报表</text>
								</view>
							</uni-grid-item>
							<uni-grid-item :index="3" class="uni-group-item">
								<view>
									<uni-icons type="shop-filled" size="45" class="uni-icon" ></uni-icons>
									<text class="text-three">多店销售报表</text>
								</view>
							</uni-grid-item>

							
			</uni-grid>
 			<uni-grid :column="2" :showBorder="false" :square="false" @change="change" style="padding-top: 15%;">
						
					<uni-grid-item :index="4" class="uni-group-item">
						<view>
							<uni-icons type="shop" size="45" class="uni-icon"></uni-icons>
							<text class="text-four">库存统计</text>
						</view>
					</uni-grid-item> 	
					<uni-grid-item :index="6" class="uni-group-item">
						<view>
							<uni-icons type="shop" size="45" class="uni-icon"></uni-icons>
							<text class="text-five">商品图片</text>
						</view>
					</uni-grid-item>	
			</uni-grid> 
			<uni-grid :column="2" :showBorder="false" :square="false" @change="change" style="padding-top: 15%;">
						
					<uni-grid-item :index="7" class="uni-group-item">
						<view>
							<uni-icons type="shop" size="45" class="uni-icon"></uni-icons>
							<text class="text-six">库存跟踪</text>
						</view>
					</uni-grid-item> 	
	
			</uni-grid> 
			

		</uni-section>
	</view>
</template>

<script>
	import {baseUrl} from 'libs/util/global'
	export default {
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: '/static/qx.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: '/static/qx2.png',
						content: '内容 B'
					}
				],
				isAdmin: null,
				loginUserId: null,
				loginUserType: null,
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				loginUserId: null,
				loginUserType: null,
				authority: null
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					console.log("登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					console.log("登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					console.log("登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
		},
		mounted() {
		
		},
		methods: {
			
			
			change(e) {
				let numbers = e.detail.index;
				console.log("work页面 --> change方法："+this.loginUserId)
				console.log("work页面 --> change方法："+this.loginUserType)
				console.log("work页面 --> change方法："+this.authority)
				if (numbers == 1) {
					//===========进入单店销售报表页面=========
					uni.reLaunch({
						url: '/pages/form/reportForm?loginUserId='+this.loginUserId+'&loginUserType='+this.loginUserType+'&authority='+this.isAdmin
					})
				} else if (numbers == 2) {
					//============进入商品销售统计报表=========
					uni.reLaunch({
						url: '/pages/form/salesStatisitcs'
						
					})
				} else if (numbers == 3) {
					//============进入多店销售报表=========
					uni.reLaunch({
						url: '/pages/form/shopForm'
					})
				} else if (numbers == 4) {
					//============进入库存统计=========
					uni.reLaunch({
						url: '/pages/form/inventory'
					})
				} else if (numbers == 5) {
						//============进入单店周销售=========
						uni.reLaunch({
							url: '/pages/form/weekForm'
						})
				} else if (numbers == 6) {
						//============进入单店周销售=========
						uni.reLaunch({
							url: '/pages/form/imgForm'
						})	
				} else if (numbers == 7) {
						//============进入单店周销售=========
						uni.reLaunch({
							url: '/pages/form/inventoryFollowingForm'
						})	
				}
			}
		}
	}
</script>

<style>
	.text{
		position: relative;
		top: 5px;
		left: 12px;
		font-weight: bold;
		font-size: 13px;
		
	}
	.text-two{
		position: relative;
		top: 5px;
		left: 35rpx;
		font-weight: bold;
		font-size: 13px;
	}
	.text-three{
		position: relative;
		top: 5px;
		left: 25rpx;
		font-weight: bold;
		font-size: 13px;
	}
	.text-four{
		position: relative;
		top: 5px;
		left: 26px;
		font-weight: bold;
		font-size: 13px;
		
	}
	.text-five{
		position: relative;
		top: 5px;
		left: 25px;
		font-weight: bold;
		font-size: 13px;
	}
	.text-six{
		position: relative;
		top: 5px;
		left: 25px;
		font-weight: bold;
		font-size: 13px;
	}
	.uni-swiper-dot-box {
		width: 100vw;
	}

	.swiper-box {
		width: 100vw;
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: white;
	}

	.swiper-item1 {
		background-color: white;
	}

	.swiper-item2 {
		background-color: white;
	}

	.image {
		width: 100vw;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 100vw) {
		.uni-swiper-dot-box {
			width: 100vw;
			margin: 0 auto;
			margin-top: 0px;
		}

		.image {
			width: 100vw;
		}
	}

	.uni-bg-red {
		background-color: white;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}
	.uni-group{
		position: relative;
		top:5px;
		width: 90vw;
		height: 40vh;
	}
	.uni-group-item{
		position: relative;
		width: 200px;
		top: 10px;
	}
	.uni-icon{

		padding-left: 16%;
	}
	
	text{
		margin-left: 25%;
		display: flex;
		font-size: 22rpx;
	}
</style>